body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient( 0deg, #00292d 0%, #005353 50%, #002c2d 60%, #002c2d 100% );
  font-family: "Kanit", sans-serif;
  overflow: hidden;
}

.play-room {
  width: 100%;
  position: fixed;
  height: auto;
  font-size: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  height: auto;
  width: 100%;
  font-size: clamp(12px, 3vw, 16px);
}

/*******
╔════════════════════════════════════════════════════════════╗
║                                                            ║
║     ██╗     ██╗██╗   ██╗███████╗                           ║
║     ██║     ██║██║   ██║██╔════╝                           ║
║     ██║     ██║██║   ██║█████╗                             ║
║     ██║     ██║╚██╗ ██╔╝██╔══╝                             ║
║     ███████╗██║ ╚████╔╝ ███████╗                           ║
║     ╚══════╝╚═╝  ╚═══╝  ╚══════╝                           ║
║                        L I V E                             ║
╚════════════════════════════════════════════════════════════╝
******/

.frame-LIVE {
  display: flex;
  position: relative;
  width: 100%;
  height: 28.5%;
}

.frame-LIVE .Live-stream {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-image: url("../images/pokdeng-game-room/live-stream/เปิดตัว0.1.mp4");
  background-size: 100% 100%;
}

.game-header .display-balance {
  position: absolute;
  width: 23.64%;
  height: auto;
  top: 2%;
  left: 76.36%;
  aspect-ratio: 3.33;
  border-radius: 50px 0px 0px 50px;
  overflow: hidden;
  box-shadow: inset 1px 1px 7.7px #aeffcd40,
    inset -2.29px -2.29px 0px -1.15px #60d2864c,
    inset 2.29px 2.29px 0px -1.15px #94c99087, 0px 4px 4px #00000040;
  background: 
    linear-gradient( 0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(0deg, rgba(0, 67, 38, 0.45) 0%, rgba(0, 67, 38, 0.45) 100%),
    linear-gradient( 0deg, rgba(153, 153, 153, 0.2) 0%, rgba(153, 153, 153, 0.2) 100% );
  z-index: 10;
}

.display-balance .credit {
  position: absolute;
  width: 57.69%;
  height: 65.22%;
  top: 17.39%;
  left: 21.15%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 12.5px;
  text-align: right;
  letter-spacing: -0.46px;
  line-height: normal;
  white-space: nowrap;
}

.display-balance .currency {
  position: absolute;
  width: 14.42%;
  height: 43.48%;
  top: 34.78%;
  left: 81.73%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 8px;
  text-align: right;
  letter-spacing: -0.46px;
  line-height: normal;
}

.display-balance .icon {
  position: absolute;
  width: 9.62%;
  height: 43.48%;
  top: 26.09%;
  left: 6.73%;
  object-fit: cover;
}

.game-header .display-personal {
  position: absolute;
  top: 1%;
  left: 0;
  width: 38.64%;
  height: auto;
  aspect-ratio: 3.33;
  z-index: 10;
}

.display-personal .user-rank {
  position: absolute;
  width: 61.18%;
  height: 56.86%;
  top: 15.69%;
  left: 38.82%;
  padding-left: 5%;
  padding-top: 1%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 0px 50px 50px 0px;
  overflow: hidden;
  box-shadow: inset 1px 1px 7.7px #aeffcd40,
    inset -2.29px -2.29px 0px -1.15px #60d2864c,
    inset 2.29px 2.29px 0px -1.15px #94c99087, 0px 4px 4px #00000040;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(0deg, rgba(0, 67, 38, 0.45) 0%, rgba(0, 67, 38, 0.45) 100%),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.2) 0%,
      rgba(153, 153, 153, 0.2) 100%
    );
}

.display-personal .username {
  height: 55.17%;
  width: 100%;
  display: flex;
  font-weight: 600;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0;
  line-height: normal;
  align-items: center;
  justify-content: center;
}

.display-personal .rank {
  height: 44.83%;
  width: 78.5%;
  left: 21.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.39) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  font-weight: 600;
  color: #ffffff;
  font-size: 7px;
  letter-spacing: 0;
  line-height: normal;
}

.display-personal .iconRank {
  margin-right: 3px;
  margin-left: 22%;
}

.display-personal .level-exp {
  position: absolute;
  top: 56.86%;
  left: 48.24%;
  width: 48.24%;
  height: 37.25%;
}

.display-personal .EXP-bar {
  width: 84.15%;
  height: 36.84%;
  top: 42.11%;
  background-color: #000000;
  border-radius: 0px 5px 5px 0px;
  overflow: hidden;
  box-shadow: inset 0px -1px 0px #000000, inset 0px -0.5px 0px #ffffff,
    inset 0.5px 0.5px 0px #ffffff, 0px 0.5px 3px #0000004c;
  position: absolute;
  left: 0;
}

.display-personal .EXP-value {
  width: 100%;
  height: 100%;
  top: 0%;
  position: absolute;
  left: 0;
}

.display-personal .Energy {
  width: 52.17%;
  height: 71.43%;
  top: 14.29%;
  position: relative;
  left: 0;
  border-radius: 0px 50px 50px 0px;
  background: linear-gradient(90deg, rgb(0, 75, 21) 0%, rgb(0, 255, 110) 100%);
}

.display-personal .p {
  position: absolute;
  top: 1px;
  left: 36px;
  width: 12px;
  height: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ffffff;
  font-size: 6px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.display-personal .percent-numb {
  font-weight: 600;
  color: #ffffff;
  font-size: 6px;
  letter-spacing: 0;
}

.display-personal .percent {
  font-size: 5px;
}

.display-personal .exp-text {
  position: absolute;
  top: calc(50% - 2px);
  left: 6px;
  width: 13px;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ffffff;
  font-size: 5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.display-personal .LV-box {
  position: absolute;
  top: 0;
  right: 0%;
  width: 23.17%;
  height: 100%;
  border-radius: 50px;
  aspect-ratio: 1;
  background: linear-gradient(
    180deg,
    rgba(17, 199, 0, 1) 0%,
    rgba(8, 97, 0, 1) 100%
  );
  align-items: center;
  justify-content: center;
}

.display-personal .LV {
  position: absolute;
  width: 100%;
  height: 47.37%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 6px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.display-personal .LV-numb {
  position: absolute;
  width: 100%;
  height: 73.68%;
  top: 26.32%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.display-personal .button-exit {
  position: absolute;
  width: 38.82%;
  height: 68.63%;
  top: 15.69%;
  left: 0;
  box-shadow: inset 1px 1px 7.7px #aeffcd40,
    inset -2.29px -2.29px 0px -1.15px #60d2864c,
    inset 2.29px 2.29px 0px -1.15px #94c99087, 0px 4px 4px #00000040;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(0deg, rgba(0, 67, 38, 0.45) 0%, rgba(0, 67, 38, 0.45) 100%),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.2) 0%,
      rgba(153, 153, 153, 0.2) 100%
    );
}

.display-personal .iconExit {
  position: absolute;
  height: 65%;
  top: 17.14%;
  left: 15%;
  width: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.display-personal .profile-picture {
  position: absolute;
  width: 30%;
  height: 100%;
  left: 24.12%;
  top: 0%;
  border-radius: 238.76px;
  overflow: hidden;
  aspect-ratio: 1;
}

.display-personal .profile {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}

.display-personal .frame-profile {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid;
  border-color: #00df1a;
  box-shadow: 0px 0px 2.5px #000000b2, inset 0px -1px 0.9px #005541;
  aspect-ratio: 1;
}

/*******
╔═══════════════════════════════════════════════════════╗
║                                                       ║
║     ███████╗████████╗ █████╗ ████████╗███████╗        ║
║     ██╔════╝╚══██╔══╝██╔══██╗╚══██╔══╝██╔════╝        ║
║     ███████╗   ██║   ███████║   ██║   ███████╗        ║
║     ╚════██║   ██║   ██╔══██║   ██║   ╚════██║        ║
║     ███████║   ██║   ██║  ██║   ██║   ███████║        ║
║     ╚══════╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝   ╚══════╝        ║
║                        S T A T S                      ║
╚═══════════════════════════════════════════════════════╝
******/

.zone-table-stats {
  position: fixed;
  width: 95%;
  left: 2.5%;
  height: auto;
  top: 29.5%;
  aspect-ratio: 3.15/1;
}

.zone-table-stats .table-display {
  width: 47%;
  height: 13.3%;
  top: 85.5%;
  left: 53.48%;
  position: absolute;
  border-radius: 54.99px;
  flex-direction: row;
}

.zone-table-stats .data-text {
  display: flex;
  position: relative;
  font-size: 7px;
  margin-left: 2px;
  margin-top: auto;
  margin-bottom: auto;
}

.zone-table-stats .glass-tab {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0px;
  object-fit: cover;
  display: flex;
  flex-direction: row;
  background-image: url("../images/pokdeng-game-room/table-stats/glass-bar-DateTimeDay.png");
  background-size: 100% 100%;
  padding: 2%;
}

.zone-table-stats .icon {
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  height: 50%;
  aspect-ratio: 1;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.zone-table-stats .info-user-online {
  top: 0;
  left: 75%;
  width: 22.5%;
  position: absolute;
  height: 100%;
  display: flex;
  justify-items: center;
  align-content: center;
  text-align: right;
  font-weight: 300;
  color: #ffffff;
  font-size: 7.5px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .dot-online {
  margin-top: 3px;
  width: 3px;
  height: 3px;
}

.zone-table-stats .time {
  top: 0;
  left: 53%;
  width: 22.5%;
  display: flex;
  position: absolute;
  height: 100%;
  font-weight: 300;
  letter-spacing: 0;
  white-space: nowrap;
  justify-items: center;
  align-content: center;
  text-align: center;
  color: #ffffff;
  font-size: 7.5px;
  line-height: normal;
}

.zone-table-stats .date {
  top: 0;
  left: 30%;
  width: 23%;
  position: absolute;
  height: 100%;
  display: flex;
  justify-items: center;
  align-content: center;
  text-align: center;
  font-weight: 300;
  color: #ffffff;
  font-size: 7.5px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .day {
  top: 0;
  font-weight: 300;
  padding-left: 2%;
  width: 30%;
  display: flex;
  position: absolute;
  height: 100%;
  color: #ffffff;
  font-size: 7.5px;
  letter-spacing: 0;
  justify-items: center;
  align-content: center;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .table-stats {
  background-image: url("../images/pokdeng-game-room/table-stats/glass-tableSub.png");
  background-size: 100% 100%;
  position: absolute;
  width: 28.06%;
  height: 79.05%;
  left: 71.94%;
  top: 0;
  border-radius: 12px;
  overflow: hidden;
}

.chart-wrapper {
  width: 117px;
  height: 107px;
  display: flex;
  flex-direction: column;

  border-radius: 10px;
  overflow: hidden;
}

/* ========================= */
/* ส่วนบน: กราฟเปอร์เซ็นต์ */
/* ========================= */
.chart-top {
  width: 100%;
  height: 42%; /* ครึ่งบนของกล่อง */
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: flex-end;
  background: transparent;
  flex-direction: row;
}

/* กล่องกราฟเปอร์เซ็นต์ */
.percent-chart {
  width: 100%;
  height: 8%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 25, 0.9) 0%,
    rgba(15, 25, 30, 0.85) 100%
  );
  box-sizing: border-box;
  flex-direction: row;
}

.p1 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-left: 4.5%;
}
.p2 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  text-align: center;
  margin-left: 20.5%;
}
.p3 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-left: 36.5%;
}
.p4 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-left: 52.5%;
}
.p5 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-left: 69.5%;
}
.p6 {
  position: absolute;
  bottom: 0;
  width: 12%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-left: 85.5%;
}

/* คอลัมน์แต่ละอัน */
.bar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* ตัวเลข % */
.bar .value {
  position: absolute;
  bottom: 10%;
  transform: translateY(-10%);
  font-size: 6px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 2px #000000;
}

/* แท่งกราฟ */
.bar .fill {
  width: 60%;
  height: var(--h);
  background: linear-gradient(180deg, #fff83a 0%, #ffca00 80%);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4);
  transition: height 0.5s ease-in-out;
  margin-left: auto;
  margin-right: auto;
}

/* ป้ายชื่อ */
.bar .label {
  font-size: 6px;
  font-weight: 600;
  color: #fff;
  margin-top: 1px;
}

/* แอนิเมชันเติมแท่ง */
.bar .fill {
  height: 0;
  animation: grow 0.8s forwards;
}
@keyframes grow {
  to {
    height: var(--h);
  }
}

/* ========================= */
/* ส่วนล่าง: ตารางวงกลม    */
/* ========================= */
.chart-bottom {
  width: 100%;
  height: 55%; /* ครึ่งล่าง */
  background: linear-gradient(
    180deg,
    rgb(200, 200, 200, 0.05),
    rgba(255, 255, 255, 0.055)
  );
  display: flex;
  top: 42%;
  position: absolute;
  justify-content: center;
  align-items: center;
}
.chart-bottom .statsCol {
  width: 95%;
  height: 100%;
  position: relative;
  background-color: #ffffff38;
  border-radius: 0 0 8px 8px;
  aspect-ratio: 2.2083;
  border-top: 1px solid #ff0000;
  border: 0.1px solid #38010188;
}

.chart-bottom .circleBanker {
  position: relative;
  border-radius: 50%;
  background-color: transparent;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #e40000;
}

.chart-bottom .circlePlayer {
  position: relative;
  border-radius: 50%;
  background-color: transparent;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #003cff;
}

.chart-bottom .circleTIE {
  position: relative;
  border-radius: 50%;
  background-color: transparent;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #21c02c;
}


.chart-bottom .row-1,
.chart-bottom .row-2,
.chart-bottom .row-3,
.chart-bottom .row-4,
.chart-bottom .row-5 {
  flex-direction: row;
  position: relative;
  width: 100%;
  left: 0;
  height: auto;
  aspect-ratio: 10;
}

.chart-bottom .col-1 {
  display: flex;
  left: 0;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.chart-bottom .col-2 {
  display: flex;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  left: 10%;
  aspect-ratio: 1;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
}

.chart-bottom .col-3 {
  display: flex;
  width: 10%;
  height: auto;
  left: 20%;
  position: absolute;
  top: 0;
  aspect-ratio: 1;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
}

.chart-bottom .col-4 {
  display: flex;
  left: 30%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.chart-bottom .col-5 {
  display: flex;
  left: 40%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .col-6 {
  display: flex;
  left: 50%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .col-7 {
  display: flex;
  left: 60%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .col-8 {
  display: flex;
  left: 70%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .col-9 {
  display: flex;
  left: 80%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .col-10 {
  display: flex;
  left: 90%;
  border-right: 0.1px solid #002c2d45;
  border-left: 0.1px solid #002c2d45;
  position: absolute;
  width: 10%;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}



.zone-table-stats .win-rate {
  position: absolute;
  display: flex;
  top: 0%;
  left: 61.63%;
  width: 7.91%;
  height: 78.52%;
  justify-content: space-between;
  flex-direction: column;
}

.zone-table-stats .element-1st {
  position: absolute;
  width: 100%;
  height: 30.22%;
  top: 0;
  left: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0px 0px 36.66px #f2f2f2, inset 0px 0px 6.87px #ffffff80,
    inset -3px -3px 1.15px -2.29px #ffffff, inset 3px 3px 1.15px -2.29px #ffffff,
    inset -1.2px -1.5px 0px -1.15px #262626,
    inset 1.5px 1.5px 0px -1.15px #333333;
  background-blend-mode: darken;
  background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 4, 49, 1) 100%
    ),
    linear-gradient(
      0deg,
      rgba(51, 51, 51, 0.45) 0%,
      rgba(51, 51, 51, 0.45) 100%
    ),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.3) 0%,
      rgba(153, 153, 153, 0.3) 100%
    );
}

.zone-table-stats .glass-effect-2 {
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100%);
  top: 0;
  left: 0;
  object-fit: cover;
}

.zone-table-stats .stackWIN {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-text-stroke: 0.5px #00000080;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.zone-table-stats .player {
  width: 100%;
  height: 40%;
  bottom: 0;
  left: 0;
  position: relative;
  background-color: #d9d9d945;
  display: flex;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 7px;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .WIN-RATE {
  position: relative;
  width: 100%;
  height: 12.37%;
  top: 55.67%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 4px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .element-2nd {
  position: absolute;
  width: 100%;
  height: 30.22%;
  top: 34.89%;
  left: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0px 0px 36.66px #f2f2f2, inset 0px 0px 6.87px #ffffff80,
    inset -3px -3px 1.15px -2.29px #ffffff, inset 3px 3px 1.15px -2.29px #ffffff,
    inset -1.2px -1.5px 0px -1.15px #262626,
    inset 1.5px 1.5px 0px -1.15px #333333;
  background-blend-mode: darken;
  background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 4, 49, 1) 100%
    ),
    linear-gradient(
      0deg,
      rgba(51, 51, 51, 0.45) 0%,
      rgba(51, 51, 51, 0.45) 100%
    ),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.3) 0%,
      rgba(153, 153, 153, 0.3) 100%
    );
}

.zone-table-stats .element-3rd {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30.22%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0px 0px 36.66px #f2f2f2, inset 0px 0px 6.87px #ffffff80,
    inset -3px -3px 1.15px -2.29px #ffffff, inset 3px 3px 1.15px -2.29px #ffffff,
    inset -1.2px -1.5px 0px -1.15px #262626,
    inset 1.5px 1.5px 0px -1.15px #333333;
  background-blend-mode: darken;
  background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 4, 49, 1) 100%
    ),
    linear-gradient(
      0deg,
      rgba(51, 51, 51, 0.45) 0%,
      rgba(51, 51, 51, 0.45) 100%
    ),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.3) 0%,
      rgba(153, 153, 153, 0.3) 100%
    );
}

.zone-table-stats .table-stats-2 {
  left: 0;
  width: 59.47%;
  height: 100%;
  position: absolute;
  top: 0;
}

.zone-table-stats .table-round {
  width: 29.7%;
  height: 13.27%;
  top: 86.99%;
  left: 0;
  box-shadow: inset 0px 0px 36.66px #f2f2f2, inset 0px 0px 6.87px #ffffff80,
    inset -3px -3px 1.15px -2.29px #ffffff, inset 3px 3px 1.15px -2.29px #ffffff,
    inset -1.2px -1.5px 0px -1.15px #262626,
    inset 1.5px 1.5px 0px -1.15px #333333;
  position: absolute;
  border-radius: 54.99px;
  overflow: hidden;
  background-blend-mode: darken;
  background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 4, 49, 1) 100%
    ),
    linear-gradient(
      0deg,
      rgba(51, 51, 51, 0.45) 0%,
      rgba(51, 51, 51, 0.45) 100%
    ),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.3) 0%,
      rgba(153, 153, 153, 0.3) 100%
    );
}

.zone-table-stats .info {
  position: absolute;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 5%;
  width: 90%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.zone-table-stats .round {
  position: relative;
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  color: #ffffff;
  font-size: 7.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  margin-right: 4%;
}

.zone-table-stats .tableNumb {
  margin-left: 4%;
  position: relative;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  color: #ffffff;
  font-size: 7.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .bar-stats-total-win {
  position: absolute;
  top: 76%;
  left: 4.5%;
  width: 95%;
  height: 22.48%;
}

.zone-table-stats .bar {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: -3px;
  object-fit: cover;
}
.zone-table-stats .info-stats {
  display: flex; /* เปิดโหมดจัดเรียงแนวนอน */
  flex-direction: row;
  position: relative;
  top: 25%;
  left: 37%;
  width: 45.96%;
  height: 66%;
  justify-content: space-between;
}

.zone-table-stats .stats-tie {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  top: 2%;
  width: 33.3%;
}

.zone-table-stats .dot-tie {
  position: relative;
  height: 65%;
  top: 5.32%;
  font-weight: 600;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  justify-content: center;
  align-content: center;
  width: auto;
  border-radius: 50px;
  aspect-ratio: 1;
  background: linear-gradient(
    180deg,
    rgba(35, 194, 54, 1) 0%,
    rgba(18, 157, 0, 1) 100%
  );
}

.zone-table-stats .winNumb {
  position: relative;
  width: 100%;
  height: 63.55%;
  right: 0;
  top: 20.47%;
  display: flex;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: normal;
}

.zone-table-stats .text-totalWin {
  position: absolute;
  width: 51.65%;
  height: 33.28%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 3px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zone-table-stats .rectangle-4 {
  position: relative;
  width: 50px;
  height: 34.45%;
  top: 46.74%;
  left: 68.58%;
  background-color: #c9c9c9a0;
}

.zone-table-stats .stats-player {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  top: 2%;
  width: 33.3%;
}

.zone-table-stats .dot-player {
  position: relative;
  height: 65%;
  top: 5.32%;
  font-weight: 600;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  justify-content: center;
  align-content: center;
  width: auto;
  border-radius: 50px;
  aspect-ratio: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 132, 255, 1) 0%,
    rgba(0, 60, 255, 1) 100%
  );
}

.zone-table-stats .stats-banker {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  top: 2%;
  width: 33.3%;
}

.zone-table-stats .dot-banker {
  position: relative;
  height: 65%;
  top: 5.32%;
  font-weight: 600;
  color: #ffffff;
  font-size: 9px;
  text-align: center;
  justify-content: center;
  align-content: center;
  width: auto;
  border-radius: 50px;
  aspect-ratio: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 70, 70, 1) 0%,
    rgba(218, 0, 0, 1) 100%
  );
}

.zone-table-stats .table-stats-main {
  width: 100%;
  height: 80.52%;
  left: 0;
  border-radius: 10px;
  box-shadow: #333333, 0px 2px 7.5px #0000004c, 0px 4px 4px #00000040;
  background-image: url("../images/pokdeng-game-room/table-stats/glass-tableMain.png");
  background-size: 100% 100%;
  position: relative;
  top: 0;
}

.zone-table-stats .glass-effect-main {
  border-radius: 10px;
  position: relative;
  width: 98%;
  height: 96%;
  top: 2%;
  left: 1%;
  border: 0.01px solid;
  border-color: #ffffff51;
}

.zone-table-stats .banker,
.zone-table-stats .player-1,
.zone-table-stats .player-2,
.zone-table-stats .player-3,
.zone-table-stats .player-4,
.zone-table-stats .player-5,
.zone-table-stats .player-6 {
  flex-direction: row;
  position: absolute;
  width: 100%;
  left: 0;
  height: auto;
  aspect-ratio: 17;
}

.zone-table-stats .head-B {
  width: 5.91%;
  height: auto;
  border-radius: 10px 0px 0px 0px;
  background: linear-gradient(
    180deg,
    rgba(255, 70, 70, 1) 0%,
    rgba(218, 0, 0, 1) 100%
  );
  position: relative;
  top: 0;
  left: 0;
  border: 0.1px solid;
  border-color: #ffffff51;
  font-weight: 400;
  color: #ffffff;
  font-size: 8.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-items: center;
  align-content: center;
  aspect-ratio: 1;
}
.zone-table-stats .head-Player {
  width: 5.91%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 132, 255, 1) 0%,
    rgba(0, 60, 255, 1) 100%
  );
  position: relative;
  top: 0;
  left: 0;
  border: 0.1px solid;
  border-color: #ffffff51;
  font-weight: 400;
  color: #ffffff;
  font-size: 8.5px;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-items: center;
  align-content: center;
  aspect-ratio: 1;
}
.zone-table-stats .head-Player6 {
  width: 5.91%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 132, 255, 1) 0%,
    rgba(0, 60, 255, 1) 100%
  );
  border-radius: 0px 0px 0px 10px;
  position: relative;
  top: 0;
  left: 0;
  border: 0.1px solid;
  border-color: #ffffff51;
  font-weight: 400;
  color: #ffffff;
  font-size: 8.5px;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-items: center;
  align-content: center;
  aspect-ratio: 1;
}

.zone-table-stats .rd-1 {
  display: flex;
  position: absolute;
  width: 5.88%;
  height: auto;
  top: 0;
  left: 5.88%;
  aspect-ratio: 1;
  border: 0.1px solid;
  border-color: #ffffff51;
}

.zone-table-stats .rd-2 {
  display: flex;
  width: 5.88%;
  left: 11.76%;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
  border: 0.1px solid;
  border-color: #ffffff51;
}

.zone-table-stats .rd-3 {
  display: flex;
  width: 5.88%;
  left: 17.64%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-4 {
  display: flex;
  width: 5.88%;
  left: 23.52%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-5 {
  display: flex;
  width: 5.88%;
  left: 29.40%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-6 {
  display: flex;
  width: 5.88%;
  left: 35.28%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-9 {
  display: flex;
  width: 5.88%;
  left: 52.92%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-10 {
  display: flex;
  width: 5.88%;
  left: 58.80%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-11 {
  display: flex;
  width: 5.88%;
  left: 64.68%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-12 {
  display: flex;
  width: 5.88%;
  left: 70.56%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-7 {
  display: flex;
  width: 5.88%;
  left: 41.16%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-8 {
  display: flex;
  width: 5.88%;
  left: 47.04%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-13 {
  display: flex;
  width: 5.88%;
  left: 76.44%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-14 {
  display: flex;
  width: 5.88%;
  left: 82.32%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .rd-15 {
  display: flex;
  width: 5.88%;
  left: 88.20%;
  border: 0.1px solid;
  border-color: #ffffff51;
  position: absolute;
  height: auto;
  top: 0;
  aspect-ratio: 1;
}

.zone-table-stats .T-win {
  display: flex;
  position: absolute;
  width: 5.88%;
  height: 100%;
  top: 0;
  left: 94.08%;
  aspect-ratio: 1;
}


.zone-table-stats .totalWin {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 132, 255, 1) 0%,
    rgba(0, 60, 255, 1) 100%
  );
  position: relative;
  top: 0;
  left: 0;
  border: 0.1px solid;
  border-color: #ffffff5d;
  border-radius: 0px 7px 0px 0px;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 8px;
  text-align: center;
  line-height: 11.5px;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.zone-table-stats .totalWin-Score {
  width: 100%;
  height: 100%;
  background-color: #ffffff80;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 0px 0px 0px 0px;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  border-bottom: 0.1px solid #ffffff5d;
  color: #0033ff;
  font-size: 8px;
  text-align: center;
  line-height: 11.5px;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.zone-table-stats .totalWin6-Score {
  width: 100%;
  height: 100%;
  background-color: #ffffff80;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 0px 0px 7px 0px;
  align-items: center;
  justify-content: center;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: #0033ff;
  font-size: 8px;
  text-align: center;
  line-height: 11.5px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.table-stats-main .dotBanker {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotBanker.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotBanker-DENG {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotBanker-DENG.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerWIN {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerWIN.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerWIN-DENG {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerWIN-DENG.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  font-size: 7.5px;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerTIE {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerTIE.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  font-size: 7.5px;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerTIE-DENG {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerTIE-DENG.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  font-size: 7px;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerLOSE {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerLOSE.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  font-size: 7.5px;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 300;
  letter-spacing: -0.11px;
}

.table-stats-main .dotPlayerLOSE-DENG {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/dotPlayerLOSE-DENG.svg');
  background-size: 100% 100%; 
  color: #ffffff;
  font-size: 7.5px;
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 2%;
  height: auto;
  width: 95%;
  aspect-ratio: 1;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: -0.11px;
}

.table-stats-main .point0 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/0.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point1 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/1.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point2 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/2.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point3 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/3.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point4 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/4.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point5 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/5.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point6 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/6.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point7 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/7.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point7-5 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/7-5.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point8 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/8.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}

.table-stats-main .point9 {
  position: relative;
  border-radius: 50%;
  background-image: url('../images/pokdeng-game-room/table-stats/9.svg');
  background-size: 100% 100%; 
  margin: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
  left: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 1;
}


/*******
╔══════════════════════════════════════════════════════════════╗
║                                                               ║
║     ██████╗  ███████╗████████╗████████╗██╗███╗   ██╗ ██████╗  ║
║     ██╔══██╗ ██╔════╝╚══██╔══╝╚══██╔══╝██║████╗  ██║██╔════╝  ║
║     ██████╔╝ █████╗     ██║      ██║   ██║██╔██╗ ██║██║  ███╗ ║
║     ██╔══██╔ ██╔══╝     ██║      ██║   ██║██║╚██╗██║██║   ██║ ║
║     ██████╔╝ ███████╗   ██║      ██║   ██║██║ ╚████║╚██████╔╝ ║
║     ╚═════╝  ╚══════╝   ╚═╝      ╚═╝   ╚═╝╚═╝  ╚═══╝ ╚═════╝  ║
║                        B E T T I N G                          ║
╚══════════════════════════════════════════════════════════════╝
******/

/* เปิด grid ช่วยกะเปอร์เซ็นต์ (ทุก 5%) */
body.hitbox .pokdeng-tablegame::before{
  content:"";
  position:absolute; inset:0; z-index:9999; pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 5% 5%;
}

/* ทำโซนที่กดได้ให้มีสีทับบาง ๆ และเส้นขอบ */
body.hitbox .hand-zone{ outline:2px dashed rgba(255,255,255,.65); }
body.hitbox .hand-p1{ background: rgba(255, 99, 133, 0.8); }
body.hitbox .hand-p2{ background: rgba(255, 159,  64, 0.8); }
body.hitbox .hand-p3{ background: rgba(255, 205,  86, 0.8); }
body.hitbox .hand-p4{ background: rgba( 75, 192, 192, 0.8); }
body.hitbox .hand-p5{ background: rgba( 54, 162, 235, 0.8); }
body.hitbox .hand-p6{ background: rgba(153, 102, 255, 0.8); }

/* ป้ายชื่อช่วยจำ */
body.hitbox .hand-zone::after{
  content: attr(data-seat);
  position:absolute; left:6px; top:4px; z-index:10000;
  font: 700 12px/1.2 system-ui; color:#fff; text-shadow:0 1px 2px #0009;
}



.pokdeng-tablegame {
  position: fixed;
  width: 100%;
  height: 31.3%;
  bottom: 21%;
  z-index: 1;
}

.pokdeng-tablegame .hand {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.pokdeng-tablegame .table {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
}


.pokdeng-tablegame .actionmode {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ปุ่มพื้นที่ (overlay) – ใช้ PNG เป็น mask ให้กดได้ตรงรูปเท่านั้น */
.hand-zone{
  clip-path: inset(0);
  position: absolute; inset: 0;
  z-index: 3;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0; background-color: transparent;
  cursor: pointer; z-index: 2;
  /* ใช้ไฟล์เดียวกันเป็น mask เพื่อให้โปร่งเฉพาะส่วนที่มองเห็น */
  -webkit-mask-image: var(--img);
          mask-image: var(--img);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* เพื่อให้มองเห็น overlay ตาม PNG (ถ้าต้องการเห็นสี overlay ก็เติม background-image: var(--img); ได้) */
  background-image: var(--img);
}

/* จากนั้นกำหนดทรงคร่าว ๆ ให้แต่ละมือ */
.hand-p1 { clip-path: polygon(7% 25%, 27% 25%, 27% 48.5%, 7% 60%); }
.hand-p2 { clip-path: polygon(27% 48.5%, 33.5% 60%, 24.5% 92%, 13% 80%, 7% 60%); }
.hand-p3 { clip-path: polygon(33.5% 60%, 50% 60%, 50% 92%, 24.5% 92%); }
.hand-p4 { clip-path: polygon(50% 60%, 67% 60%, 75.5% 92%, 50% 92%); }
.hand-p5 { clip-path: polygon(67% 60%, 75.5% 92%, 87% 80%, 93% 58%, 73% 48.5%); }
.hand-p6 { clip-path: polygon(72.5% 25%, 93% 25%, 93% 58%, 73% 48.5%); }

/* ชั้นวางชิปบนโต๊ะ */
.pokdeng-tablegame .chips-layer{
  position: absolute; 
  inset: 0;
  z-index: 3; 
  pointer-events: none;
  z-index: 4;
}

/* ชิปที่โยนลงโต๊ะ */
.pokdeng-tablegame .chip-token{
  position: absolute; width: 8%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  background-size: 100% 100%; background-repeat: no-repeat;
  transition: left .35s cubic-bezier(.22,.8,.25,1), top .35s cubic-bezier(.22,.8,.25,1);
}


.display-chat {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.display-chat .display {
  width: 100%;
  height: 100%;
  top: 2.65%;
  left: 29.52%;
  border-radius: 19px;
  box-shadow: inset 0px 0px 35.29px #f2f2f2, inset 0px 0px 6.62px #ffffff80,
    inset -2.21px -2.21px 1.1px -2.21px #ffffff,
    inset 2.21px 2.21px 1.1px -2.21px #ffffff,
    inset -2.21px -2.21px 0px -1.1px #262626,
    inset 2.21px 2.21px 0px -1.1px #333333, 0px 4px 4px #00000040;
  background-blend-mode: darken;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(
      0deg,
      rgba(51, 51, 51, 0.45) 0%,
      rgba(51, 51, 51, 0.45) 100%
    ),
    linear-gradient(
      0deg,
      rgba(153, 153, 153, 0.3) 0%,
      rgba(153, 153, 153, 0.3) 100%
    );
  position: absolute;
  display: flex;
  overflow: hidden;
}

.display-chat .chat-form-user-wrapper {
  width: 38.67%;
  height: 44.88%;
  top: 4.58%;
  left: 30.66%;
  background-color: #0000007e;
  border-radius: 10px;
  backdrop-filter: blur(2px) brightness(100%) saturate(100%);
  -webkit-backdrop-filter: blur(2px) brightness(100%) saturate(100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 1px rgba(0, 0, 0, 0.13), inset -1px 0 1px rgba(0, 0, 0, 0.11);
  background-blend-mode: soft-light;
  position: absolute;
  display: flex;
  overflow: hidden;
}

.display-chat .chat-box {
  width: 80%;
  margin-top: 4%;
  margin-left: 4%;
  display: flex;
}

.display-chat .profile {
  width: 25%;
  height: 25%;
  border-radius: 50%;
  aspect-ratio: 1;
}

.display-chat .chat-contain {
  display: grid;
  width: auto;
  height: 25px;
  position: relative;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: 0px 2px;
}

.display-chat .user-info-chat {
  display: grid;
  margin-left: 3%;
  justify-content: space-between;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  width: auto;
  height: 90%;
  position: relative;
  align-self: center;
}

.display-chat .user {
  position: relative;
  align-self: end;
  width: auto;
  height: 100%;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.display-chat .time {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  width: auto;
  height: 100%;
  font-weight: 200;
  color: #ffffff;
  font-size: 6px;
  letter-spacing: 0;
  line-height: normal;
}

.display-chat .text-box {
  position: relative;
  justify-self: start;
  align-self: start;
  text-align: start;
  width: auto;
  padding: 2px;
  margin-top: 2%;
  margin-left: 2%;
  height: auto;
  font-size: 7.5px;
  letter-spacing: 0.23px;
  color: #ffffff;
  text-overflow: ellipsis;
  font-weight: 200;
  background-color: #86868666;
  border-radius: 3px;
  overflow: hidden;
  -webkit-line-clamp: auto;
  -webkit-box-orient: vertical;
}

/*******
╔════════════════════════════════════════════════════════════════╗
║                                                                ║
║     ███████╗  ██████╗   ██████╗  ████████╗███████╗ ██████╗     ║
║     ██╔════╝ ██╔═══██╗ ██╔═══██╗ ╚══██╔══╝██╔════╝ ██╔══██╗    ║
║     ███████╗ ██║   ██║ ██║   ██║    ██║   █████╗   ██████╔╝    ║
║     ██╔════╝ ██║   ██║ ██║   ██║    ██║   ██╔══╝   ██╔══██╗    ║
║     ██║      ╚██████╔╝ ╚██████╔╝    ██║   ███████╗ ██║  ██║    ║
║     ╚═╝       ╚═════╝   ╚═════╝     ╚═╝   ╚══════╝ ╚═╝  ╚═╝    ║
║                        F O O T E R                             ║
╚════════════════════════════════════════════════════════════════╝
******/

.footer {
  position: fixed;
  margin-top: 10px;
  bottom: 2.88%;
  width: 100%;
  height: auto;
  background-image: url("../images/pokdeng-game-room/footer/footer tap.png");
  background-size: 100% 100%;
  overflow: visible !important;
  text-align: center;
  justify-self: center;
  align-self: center;
  aspect-ratio: 2.82/1;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer .left-bar {
  position: absolute;
  width: 31.82%;
  height: auto;
  top: 0;
  left: 0;
  background-image: url("../images/pokdeng-game-room/footer/left-bar.png");
  background-size: 100% 100%;
  justify-self: center;
  align-self: center;
  aspect-ratio: 0.897;
}

.footer .right-bar {
  position: absolute;
  width: 31.82%;
  height: auto;
  top: 0;
  right: 0;
  background-image: url("../images/pokdeng-game-room/footer/right-bar.png");
  background-size: 100% 100%;
  justify-self: center;
  align-self: center;
  aspect-ratio: 0.897;
}

/************ BUTTON SWITCH MODE - ปุ่มเปลี่ยนโหมดเลือกเล่น ขาและ เจ้า  ************/
/************ BUTTON SWITCH MODE - ปุ่มเปลี่ยนโหมดเลือกเล่น ขาและ เจ้า  ************/
.footer .btn-mode {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: 25.59%;
  height: 20%;
  padding-bottom: 20px;
  justify-self: center;
  align-self: center;
  display: flex;
}

.footer .btn-mode::-webkit-scrollbar {
  width: 0;
  display: none;
}

.footer .BTN-SWITCH-MODE {
  flex: 1;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #ffffff03;
  border-radius: 174px;
  border: none;
  box-shadow: 0px 4px 4px #00000040, inset 2px 1px 0px #8700ff40,
    inset -1.5px -1.5px 4px #cd78ff40, inset -1px -1px 0px #df42ff40;
  cursor: pointer;
}

.footer .BTN-SWITCH-MODE::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0px;
  border-radius: 174px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.16) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
}

/* แสงที่เลื่อนไปซ้ายขวา */
.footer .light-effect {
  position: absolute;
  top: 0%;
  width: 50%;
  height: 100%;
  border-radius: 50px;
  box-shadow: 0px 2px 8px -5px #ffffff,
    /* เงาภายนอก (Outer glow ฟ้า) */ 0px 2px 20px 3px #0d00ff,
    /* เงาภายนอกชั้นที่สอง */ inset 1px 1px 3.5px #00c7ffc7,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset -1px -2px 3.5px #00fffb,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset 0px -10px 16px #1500ff,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset 0 1px 0 rgb(255, 255, 255),
    inset 3px 0 0 rgb(0, 255, 183), inset 0 -1px 1px rgba(0, 0, 0, 0.13),
    inset -1px 0 1px rgba(0, 0, 0, 0.11);
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.56) 0%,
      rgba(4, 0, 255, 0.56) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0, 247, 255, 0.56) 0%,
      rgba(0, 247, 255, 0.56) 100%
    ),
    linear-gradient(0deg, rgba(0, 51, 255, 1) 0%, rgba(0, 51, 255, 1) 100%);
  left: 0;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

/* เมื่ออยู่ในโหมด Banker → เปลี่ยนเป็นสีแดงและเลื่อนไปขวา */
.footer .BTN-SWITCH-MODE.active .light-effect {
  top: 0%;
  left: 50%;
  box-shadow: 0px 2px 8px -5px #ffffff,
    /* เงาภายนอก (Outer glow ฟ้า) */ 0px 2px 20px 3px #ff0000,
    /* เงาภายนอกชั้นที่สอง */ inset 1px 1px 3.5px #ff5100c7,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset -1px -2px 3.5px #ff9500,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset 0px -10px 16px #570000,
    /* เงาภายใน (Inset glow ฟ้าอ่อน) */ inset 0 1px 0 rgb(255, 255, 255),
    inset 3px 0 0 rgb(255, 0, 0), inset 0 -1px 1px rgba(0, 0, 0, 0.13),
    inset -1px 0 1px rgba(0, 0, 0, 0.11);
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.56) 0%,
      rgba(175, 0, 0, 0.56) 100%
    ),
    linear-gradient(
      0deg,
      rgba(255, 68, 68, 0.56) 0%,
      rgba(255, 68, 68, 0.56) 100%
    ),
    linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 100%);
}

/* ===== ปุ่มด้านใน ===== */
.footer .btn-label {
  position: absolute;
  top: 0%;
  width: 50%;
  height: 100%;
  background-color: #6b6b6b39;
  text-align: center;
  color: #999;
  font-family: "Kanit", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  transition: all 0.3s ease;
}

.footer .btn-label .main {
  font-size: 10px;
  font-weight: 500;
}

.footer .btn-label .sub {
  font-size: 7px;
  font-weight: 200;
}

/* ตำแหน่งซ้ายขวา */
.footer .btn-label.player {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  left: 0;
}

.footer .btn-label.banker {
  border-top-right-radius: 20px; /* มุมขวาบน */
  border-bottom-right-radius: 20px; /* มุมขวาล่าง */
  right: 0;
}

/* สถานะ Player Active */
.footer .BTN-SWITCH-MODE:not(.active) .player {
  color: #fff;
  text-shadow: 0 0 12px #00bfff;
}

.footer .BTN-SWITCH-MODE:not(.active) .banker {
  color: #999;
  text-shadow: none;
}

/* สถานะ Banker Active */
.footer .BTN-SWITCH-MODE.active .banker {
  color: #fff;
  text-shadow: 0 0 12px #ff5555;
}

.footer .BTN-SWITCH-MODE.active .player {
  color: #999;
  text-shadow: none;
}

/* === CHIP AREA LAYOUT (fixed) === */
.footer .chip-area {
  position: absolute;
  width: 70%;
  height: 47.44%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  touch-action: pan-y; /* ป้องกันเพี้ยนตอนลากแนวนอน */
  user-select: none;
}

.footer .chip-area .chip-select {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ไอเท็มชิป (รองรับทั้ง <button>, <img>, <div>) */
.footer .chip-area .chip-select > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: auto; /* ปรับตามดีไซน์ของคุณ */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.28s ease-out, opacity 0.28s ease-out;
  will-change: transform, opacity;
  cursor: pointer;
}

/* (ตัวเลือก) ทำให้ชิปกลางเด่นขึ้นเล็กน้อย */
.footer .chip-area .chip-select > *[data-pos="90"] {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.footer .chip-area .chip-select > *.active {
  filter: drop-shadow(0 0 25px rgba(0,255,136,0.8)) brightness(1.2);
}

.chip-select .left-small {
  position: relative;
  text-align: center;
  justify-self: center;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.chip-select .left-mediuem {
  position: relative;
  text-align: center;
  justify-self: center;
  align-self: center;
  width: 10%;
  height: auto;
  aspect-ratio: 1;
}

.chip-select .center-main {
  position: relative;
  width: 100%;
  justify-self: center;
  align-self: center;
  text-align: center;
  height: auto;
  aspect-ratio: 1;
}
.chip-select .right-mediuem {
  position: relative;
  justify-self: center;
  align-self: center;
  text-align: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.chip-select .right-small {
  position: relative;
  justify-self: center;
  align-self: center;
  text-align: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* สไตล์ปุ่มชิป */
.chip-select .chip1,
.chip-select .chip2,
.chip-select .chip3,
.chip-select .chip4,
.chip-select .chip5 {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 58px;
  border: none;
  box-shadow: 0px 11.64px 11.64px #0000001a, 0px 4.65px 4.65px #0000000d,
    0px 1.16px 0px #0000000d, 0px 5px 4px #00000040;
  backdrop-filter: blur(29.09px) brightness(100%);
  -webkit-backdrop-filter: blur(29.09px) brightness(100%);
  background-size: cover;
  background-position: 50% 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.chip-select .chip1 {
  background-image: url("../images/pokdeng-game-room/Chip/chip-1.png");
}
.chip-select .chip2 {
  background-image: url("../images/pokdeng-game-room/Chip/chip-2.png");
}
.chip-select .chip3 {
  background-image: url("../images/pokdeng-game-room/Chip/chip-3.png");
}
.chip-select .chip4 {
  background-image: url("../images/pokdeng-game-room/Chip/chip-4.png");
}
.chip-select .chip5 {
  background-image: url("../images/pokdeng-game-room/Chip/chip-5.png");
}

/* ขอบกระจก */
.chip-select .chip1::before,
.chip-select .chip2::before,
.chip-select .chip3::before,
.chip-select .chip4::before,
.chip-select .chip5::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.16px;
  border-radius: 58px;
  background: linear-gradient(
    136deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

/* Hover Effect - ยกขึ้นเล็กน้อย */
.chip-select > div:hover button {
  transform: scale(1.08);
  filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0, 255, 255, 0.6)) !important;
  transition: all 0.3s ease;
}

/* Active state */
.chip-select button:active {
  transform: scale(0.95) !important;
}

/* เงาและแสงสำหรับชิปที่อยู่บนสุด */
.chip-select > div[style*="opacity: 1"]::after,
.chip-select > div[style*="opacity: 0.9"]::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 136, 0.4) 0%,
    rgba(0, 255, 136, 0.2) 40%,
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
  animation: glowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ปิดการคลิกขณะหมุน */
.chip-select.is-rotating > div {
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .footer .chip-area {
    perspective: 1000px;
  }
}

/*******
╔═════════════════════════════════════════════════════════════╗
║                                                             ║
║     ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗  ║
║     ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║  ║
║     ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║  ║
║     ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║  ║
║     ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║  ║
║     ╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝  ║
║                        B U T T O N                          ║
╚═════════════════════════════════════════════════════════════╝
******/

/* ===== ปุ่มกระจกแบบ Liquid Glass ===== */
.glass-btn {
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.223), 0 2px 6px rgba(0, 0, 0, 0.35);
  --inner: inset 2px 1px 0 rgba(255, 255, 255, 0.345),
    inset 2 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 2px 18px rgba(255, 255, 255, 0.14),
    inset 0 0 48px rgba(255, 255, 255, 0.08);
  --ring: 0 0 0 0 rgba(53, 196, 255, 0); /* focus ring default */

  position: relative;
  border: none;
  cursor: pointer;
  isolation: isolate; /* แยกเลเยอร์เพื่อ blend ให้สวย */
  box-shadow: var(--shadow), var(--ring);
  background: radial-gradient(
      120% 120% at 30% 25%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.06) 42%,
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      120% 120% at 70% 80%,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.06));
  color: #ffffff;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    filter 0.2s ease;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow), var(--inner), var(--ring);
  outline: none;
}

/* ขอบกระจก + เส้นไฮไลท์รอบวง */
.glass-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* สร้างขอบชั้นนอก */
  background: radial-gradient(
      100% 100% at 30% 20%,
      rgba(177, 255, 229, 0.824),
      rgba(255, 255, 255, 0.08) 55%,
      rgba(186, 255, 219, 0.167)
    ),
    conic-gradient(
      from 210deg,
      rgba(255, 255, 255, 0),
      rgba(87, 87, 87, 0.15),
      rgba(77, 77, 77, 0.157),
      rgba(255, 255, 255, 0.05),
      rgba(52, 52, 52, 0.7)
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* เจาะตรงกลางให้กลวง */
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ของเหลวด้านใน (blur + เคลื่อนไหวช้า ๆ) */
.glass-btn::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background: radial-gradient(
      55% 65% at 30% 35%,
      color-mix(in oklab, var(--accent) 70%, white 20%) 0%,
      transparent 60%
    ),
    radial-gradient(
      45% 55% at 70% 65%,
      color-mix(in oklab, var(--accent) 50%, #70a6ff 30%) 0%,
      transparent 60%
    ),
    radial-gradient(
      35% 35% at 60% 30%,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 70%
    );
  filter: blur(12px) saturate(130%);
  mix-blend-mode: screen;
  animation: float 6s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.85;
}

/* โฮเวอร์ / แอคทีฟ */
.glass-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35),
    0 0 40px 6px color-mix(in oklab, var(--glow) 40%, transparent);
  filter: brightness(1.05);
}
.glass-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* โฟกัส (คีย์บอร์ด) */
.glass-btn:focus-visible {
  --ring: 0 0 0 6px color-mix(in oklab, var(--glow) 22%, transparent);
  box-shadow: var(--shadow), var(--inner), var(--ring);
}

/* เอฟเฟกต์เหลวเคลื่อนไหว */
@keyframes float {
  0% {
    transform: translate(-2%, -2%) scale(1.02);
  }
  100% {
    transform: translate(2%, 2%) scale(0.98);
  }
}

/* Fallback ถ้าไม่รองรับ backdrop-filter */
@supports not (
  (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))
) {
  .glass-btn {
    background: radial-gradient(
      120% 120% at 30% 25%,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.05) 60%
    );
    filter: saturate(120%);
  }
}

/* ================================================ */
/*                 เอฟเฟค ลิขวิดกลาส                  */
/* ================================================ */

.liquid-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: all 0.25s ease;
  cursor: pointer;
}

.liquid-btn:hover {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(0, 255, 255, 0.4);
}

.liquid-btn img {
  pointer-events: none;
  user-select: none;
}

/* ============================== */
/*          ปุ่มเปิดเมนู             */
/* ============================== */
.button-menu {
  position: absolute;
  left: 10.71%;
  top: 12.18%;
  width: 39.29%;
  height: 35.26%;
}
.button-menu img {
  width: 45.45%;
  height: 45.45%;
}

.button-menu.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}

/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-menu.animate-press {
  animation: pressBounce 0.25s ease;
}

/* ============================== */
/*          ปุ่มเปิดย้ายห้อง            */
/* ============================== */
.button-changeRoom {
  left: 12.86%;
  top: 62.18%;
  width: 35.71%;
  height: 32.05%;
}
.button-changeRoom img {
  width: 70%;
  height: 70%;
}

.button-changeRoom.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}

/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-changeRoom.animate-press {
  animation: pressBounce 0.25s ease;
}

/* ============================== */
/*          ปุ่มเปิดแชท             */
/* ============================== */
.button-openChat {
  left: 65%;
  top: 57.05%;
  width: 32.14%;
  height: 28.85%;
}
.button-openChat img {
  width: 66.67%;
  height: 66.67%;
}

.button-openChat.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}

/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-openChat.animate-press {
  animation: pressBounce 0.25s ease;
}

/* ============================== */
/*         ปุ่มย้อนกลับชิป             */
/* ============================== */
.button-betReturn {
  position: absolute;
  right: 10.71%;
  top: 12.18%;
  width: 39.29%;
  height: 35.26%;
}
.button-betReturn img {
  width: 45.45%;
  height: 45.45%;
}
.button-betReturn.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}

/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-betReturn.animate-press {
  animation: pressBounce 0.25s ease;
}


@keyframes btnShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX( 4px); }
}
.button-betReturn.is-shaking { animation: btnShake .25s linear; }

/* ============================== */
/*         ปุ่มรูด ขา/เจ้า           */
/* ============================== */
.button-betAll {
  right: 12.86%;
  top: 62.18%;
  width: 35.71%;
  height: 32.05%;
}
.button-betAll img {
  width: 70%;
  height: 70%;
}
.button-betAll.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}
/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-betAll.animate-press {
  animation: pressBounce 0.25s ease;
}

/* ============================== */
/*         ปุ่มลงเดิมพันซ้ำ          */
/* ============================== */
.button-redoBet {
  right: 65%;
  top: 57.05%;
  width: 32.14%;
  height: 28.85%;
}
.button-redoBet img {
  width: 66.67%;
  height: 66.67%;
}
.button-redoBet.active {
  transform: scale(1.05);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6),
    inset -10px 10px 20px rgb(0, 255, 136), 0 0 20px rgba(0, 255, 255, 0.608),
    0 0 40px rgba(0, 255, 255, 0.229);
}
/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button-redoBet.animate-press {
  animation: pressBounce 0.25s ease;
}

/* ==== แถบ Marquee หลัก ==== */
.marquee-bar {
  bottom: 0%;
  position: fixed;
  width: 100%;
  height: 2.5%;
  background-color: #004029;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==== กล่องข้อความ ==== */
.marquee-box {
  position: relative;
  width: 90%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==== ข้อความที่วิ่ง ==== */
.marquee-text {
  position: absolute;
  white-space: nowrap;
  color: white;
  font-size: 9px;
  font-weight: 300;
  animation: scroll-left 20s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(100%, -50%);
}

/* ==== แอนิเมชันข้อความวิ่ง ==== */
@keyframes scroll-left {
  0% {
    transform: translate(100%, -50%);
  }
  100% {
    transform: translate(-100%, -50%);
  }
}

/***** <!-- 
╔══════════════════════════════════════════════════════════════════════════════════╗
║                                                           ║
║          ███╗   ███╗ ███████╗ ███╗   ██╗ ██╗   ██╗           ║
║          ████╗ ████║ ██╔════╝ ████╗  ██║ ██║   ██║           ║
║          ██╔████╔██║ █████╗   ██╔██╗ ██║ ██║   ██║           ║
║          ██║╚██╔╝██║ ██╔══╝   ██║╚██╗██║ ██║   ██║           ║
║          ██║ ╚═╝ ██║ ███████╗ ██║ ╚████║ ████████║            ║
║          ╚═╝     ╚═╝ ╚══════╝ ╚═╝  ╚═══╝ ╚═══════╝            ║
║                                                           ║               
╚══════════════════════════════════════════════════════════════════════════════════╝
--> ****/

.menu-display {
  position: absolute;
  display: flex;
  right: 0;
  width: auto;
  height: 48.22%;
  aspect-ratio: 0.571/1;
  bottom: 25%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2000;
}
.menu-display.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-box,
.setting-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24.1px;
  background-size: 100% 100%;
  filter: drop-shadow(10px 10px 10px #000000);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* เมื่อเมนูหลัก active */
.menu-box.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  background-image: url("../images/pokdeng-game-room/openMenu/displayMenu-1.png");
}

/* เมื่อหน้า Setting active */
.setting-box.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  background-image: url("../images/pokdeng-game-room/openMenu/displayMenu-1.png");
}

.menu-box .header,
.setting-box .header {
  width: 100%;
  height: 13%;
  display: flex;
  top: 0;
}


.menu-box .head,
.setting-box .head {
  margin-left: 8%;
  width: 75.27%;
  height: 80%;
  margin-top: 4%;
  display: flex;
  position: relative;
}

.menu-box .symbol,
.setting-box .symbol {
  top: 0;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff25;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}

.menu-box .icon,
.setting-box .icon {
  width: 60%;
  height: 60%;
  margin-left: 20%;
  margin-top: 20%;
  aspect-ratio: 1;
  object-fit: cover;
}

.menu-box .title-and-detail,
.setting-box .title-and-detail {
  display: flex;
  width: auto;
  height: 100%;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.menu-box .text-head,
.setting-box .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 50%;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 1%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.menu-box .text-sub,
.setting-box .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  margin-bottom: 5%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.menu-box .category,
.setting-box .category {
  margin-top: -5%;
  display: flex;
  margin-left: 10%;
  width: 55.76%;
  height: 80%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: space-between;
  gap: 3%;
  margin-bottom: 5%;
}

.menu-box .button,
.setting-box .button {
  position: relative;
  align-self: stretch;
  width: auto;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

/* Animation: ยุบแล้วเด้งขึ้น */
@keyframes pressBounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.85);
  }
  80% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.button.animate-press {
  animation: pressBounce 0.25s ease;
}

.menu-box .symbol-1 {
  top: 10px;
  left: 11px;
  width: 26.32%;
  display: flex;
  align-items: center;
  background-color: #ffffff1a;
  border-radius: 50px;
  overflow: hidden;
  position: absolute;
  height: 62.5%;
  aspect-ratio: 1;
}

.menu-box .icon-1 {
  height: auto;
  width: 100%;
  flex: 1;
  aspect-ratio: 1;
}

.menu-box .detail {
  display: flex;
  flex-direction: column;
  width: auto;
  height: 70%;
  left: 40%;
  align-items: flex-start;
  justify-content: start;
  position: absolute;
  top: 13px;
}

.menu-box .text-head-btn {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: start;
  width: auto;
  height: 50%;
  margin-right: -38px;
  font-weight: 200;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: normal;
}

.menu-box .text-sub-btn {
 
  align-self: stretch;
  height: 50%;
  margin-top: -5px;
  font-weight: 100;
  color: #afafaf;
  font-size: 9px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  display: flex;
  letter-spacing: 0;
  line-height: normal;
}

.menu-display .bar-basic-control {
  position: absolute;
  display: flex;
  width: 31.27%;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url("../images/pokdeng-game-room/openMenu/displayMenu-2.png");
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(100%);
  background-size: 100% 100%;
  pointer-events: none;
}

.menu-display.active .bar-basic-control {
  transform: translateX(0);
}

.menu-display .btn-basic-control {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  width: 100%;
  height: 67.1%;
  gap: 15px 0px;
  padding: 5px 17px;
  position: absolute;
  pointer-events: auto;
  bottom: 14%;
  right: 0;
}


.menu-display .btn {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.menu-display .btn-on-off {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: all 0.25s ease;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  border-radius: 50%;
}

/* ========================= */
/* ปุ่มเปิด (ON / ACTIVE)  */
/* ========================= */
.btn-basic-control .btn-on-off.active {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ========================= */
/* ปุ่มปิด (OFF) – เมื่อไม่มี active */
/* ========================= */
.btn-basic-control .btn-on-off:not(.active) {
  background: rgba(255, 255, 255, 0.359); /* สีพื้นหม่นกว่า */
  box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.401);
}

/* Animation ยุบแล้วเด้ง */
@keyframes iconPress {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.btn-basic-control .btn-on-off img.bounce {
  animation: iconPress 0.3s ease;
}



.setting-box .setting-box:hover {
  background: rgba(255,255,255,0.15);
}

.setting-box .setting-title {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: start;
  width: 121px;
  height: 30px;
  margin-top: -3.29px;
  margin-right: -38px;
  font-weight: 200;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: normal;
}

.setting-box .btn-back-setting {
  display: flex;
  position: absolute;
  top: 1%; right: 7%;
  height: 10%;
  width: auto;
  aspect-ratio: 1;
  z-index: 2000;
}

.setting-box .setting-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 65%;
  height: 80%;
  gap: 20%;
  margin-top: -5%;
}

.setting-box .text-head-btn {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: start;
  width: auto;
  height: 30%;
  margin-top: -5%;
  font-weight: 200;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: normal;
}

.setting-box .setting-content img {
  width: auto;
  height: 95%;
  opacity: 1;
}

/* ============================ */
/* ปุ่มสวิตช์เปิด/ปิดแบบในภาพ */
/* ============================ */
.setting-content .switch {
  display: flex;
  position: relative;
  width: 60%;
  height: auto;
}

.setting-content .switch input {
  opacity: 0;
  width: auto;
  height: 20px;
}

.setting-content .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  right: 0;
  bottom: 0;
  background-color: #555;
  border-radius: 34px;
  transition: background-color 0.3s ease;
  aspect-ratio: 2.5/1;
}

/* ปุ่มกลมสีขาว */
.setting-content .slider::before {
  position: absolute;
  content: "";
  height: 90%;
  margin-top: 1%;
  width: auto;
  aspect-ratio: 1;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* เปิด (ON) */
.setting-content input:checked + .slider {
  background: linear-gradient(180deg, #00ff73, #00c845);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* เลื่อนลูกกลมไปขวาเมื่อเปิด */
.setting-content input:checked + .slider::before {
  transform: translateX(170%);
}
/* hover เอฟเฟกต์ */
.setting-content .switch:hover .slider {
  filter: brightness(1.2);
}







.friend-box {
  position: absolute;
  bottom: 25%;
  right: 0;
  width: auto;
  height: 48.22%;
  aspect-ratio: 0.571/1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
   filter: drop-shadow(10px 10px 10px #000000);
  transition: opacity 0.4s ease, visibility 0.4s ease;
  background-image: url("../images/pokdeng-game-room/openMenu/displayMenu-1.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  z-index: 2001;
  /* ✅ เริ่มซ่อนอยู่นอกจอทางขวา */
  transform: translateX(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* ✅ เพิ่ม transition ลื่นๆ */
  transition: 
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.friend-box.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ส่วนหัว */
.friend-box .header {
  width: 100%;
  height: 13%;
  display: flex;
  top: 0;
}

.friend-box .head {
  margin-left: 8%;
  width: 75.27%;
  height: 80%;
  margin-top: 4%;
  display: flex;
  position: relative;
}

.friend-box .symbol {
  top: 0;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff25;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}


.friend-box .title-and-detail {
  display: flex;
  width: auto;
  height: 100%;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.friend-box .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 50%;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 1%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.friend-box .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  margin-bottom: 5%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.friend-box .btn-back-friend {
  background: none;
  border: none;
  cursor: pointer;
}
.friend-box .btn-back-friend img {
  width: 28px;
}

/* ปุ่มแท็บ */
.friend-tabs {
  width: 85%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px 10px 0 0;
}
.friend-tabs .tab {
  flex: 1;
  padding: 6px 0;
  background: transparent;
  border: none;
  color: #ddd;
  font-size: 10px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.25s ease;
}
.friend-tabs .tab.active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 500;
  border-radius: 10px 0 0 0;
  border-bottom: 2px solid #00ffa3;
}

.friend-lists {
  width: 90%;
  height: 73%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-right: 1.5%;
  padding-left: 2%;
}

/* รายการเพื่อน */
.friend-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  position: absolute;
  gap: 5%;
}

.friend-list.active {
  display: flex;
}

.friend-card {
  width: 100%;
  height: 21%;
  display: flex;
  align-items: center;
  background-image: url('../images/pokdeng-game-room/openMenu/FriendDisplay.png');
  background-size: 100% 100%;
  padding: 4%;
  aspect-ratio: 2.94/1;
}

.friend-card img.avatar {
  width: 23%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-right: 5%;
}

.friend-info {
  flex: 1;
  height: 100%;
}
.friend-info .username {
  margin-top: 0%;
  font-size: 10px;
  font-weight: 400;
  color: white;
}
.friend-info .status {
  font-size: 8px;
  color: #bcbcbc;
  margin-top: 10%;
  line-height: 1.3;
}

/* สถานะออนไลน์ / ออฟไลน์ */
.friend-action {
  text-align: right;
  height: 100%;
}
.friend-action .online-text {
  color: #00ff88;
  font-size: 8px;
}
.friend-action .offline-text {
  color: #ffffff;
  opacity: 50%;
  font-size: 8px;
}

.friend-action .invite-btn {
  display: block;
  margin-top: 18%;
  padding: 4px 10px;
  font-size: 11px;
  height: 50%;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background: linear-gradient(180deg, #00c84660, #00ff73b6);
  transition: all 0.25s ease;
}
.friend-action .invite-btn:hover {
  filter: brightness(1.2);
}
.friend-action .invite-btn.disabled {
  background: rgba(255, 255, 255, 0.15);
  cursor: not-allowed;
}




/***** <!-- 
╔════════════════════════════════════════════════════════════╗
║                                                            ║
║     ███████╗ ██╗  ██╗  █████╗  ████████╗                      ║
║     ██╔════╝ ██║  ██║ ██╔══██╗ ╚══██╔══╝                      ║
║     ██║      ███████║ ███████║    ██║                         ║
║     ██║      ██╔══██║ ██╔══██║    ██║                         ║
║     ███████║ ██║  ██║ ██║  ██║    ██║                         ║
║     ╚══════╝ ╚═╝  ╚═╝ ╚═╝  ╚═╝    ╚═╝                         ║
║                         C H A T                            ║
╚════════════════════════════════════════════════════════════╝
--> ********/

.chat-window {
  width: 100%;
  height: 64.61%;
  display: flex;
  position: fixed;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
  z-index: 2000;
}

.chat-window.active {
  bottom: 0%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0%);
}

.chat-window .display {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../images/pokdeng-game-room/openChat/DisplayChat.png");
  background-size: 100% 100%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


.chat-window .header-chat {
  width: 100%;
  height: 15.19%;
  display: flex;
  top: 0;
  
}

.chat-window .head {
  margin-left: 8%;
  width: 60.27%;
  height: auto;
  margin-top: 2%;
  display: flex;
  position: relative;
}
.chat-window .symbol {
  top: 2%;
  height: 70%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff1a;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}

.chat-window .title-and-detail {
  display: flex;
  top: -20%;
  width: 100%;
  height: auto;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.chat-window .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 0%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.chat-window .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  margin-top: 0%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}


.chat-window .btn-close {
  display: flex;
  position: absolute;
  top: 4.5%;
  width: auto;
  height: 5%;
  right: 7%;
  aspect-ratio: 1 ;
}

.chat-window .chat-area {
  width: 90%;
  height: 62%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
}
/* สไตล์ scrollbar */
.chat-area::-webkit-scrollbar {
  width: 6px;
}
.chat-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* ===== กล่องข้อความแต่ละคน ===== */
.chat-message {
  display: flex;
  margin-bottom: 12px;
  max-width: 90%;
}

/* โปรไฟล์ */
.profile-pic {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.profile-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.profile-pic .profile-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #0f0;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

/* เนื้อหาข้อความ */
.message-content {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.message-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
}
.username {
  font-weight: 600;
  color: #fff;
}
.timestamp {
  color: #aaa;
  font-size: 11px;
}

/* กล่องข้อความ */
.message-bubble {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px 10px 10px 0;
  padding: 8px 12px;
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  max-width: 80%;
  word-wrap: break-word;
  backdrop-filter: blur(8px);
}

/* ===== สไตล์ฝั่งเราเอง (ขวา) ===== */
.chat-message.self {
  flex-direction: row-reverse;
  margin-left: auto;
}
.chat-message.self .message-content {
  align-items: flex-end;
  margin-left: 0;
  margin-right: 8px;
}
.chat-message.self .message-bubble {
  background: rgba(0, 255, 0, 0.25);
  border-radius: 10px 10px 0 10px;
  max-width: 75%;
  word-wrap: break-word;
  backdrop-filter: blur(8px);
}
.chat-message.self .profile-ring {
  border-color: #0ff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* ======================== */
/* 🔹 ป้ายภารกิจ (Mission Card) */
/* ======================== */

.chat-window .chat-system {
  display: none;      
  width: 90%;
  height: 62%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  
}
/* สไตล์ scrollbar */
.chat-system::-webkit-scrollbar {
  width: 6px;
}
.chat-system::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* 🔹 โซนรวมการ์ดภารกิจ */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  width: 100%;
  font-family: "Kanit", sans-serif;
}

/* 🔹 การ์ดภารกิจพื้นฐาน */
.mission-card {
  width: 90%;
  margin: auto;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  height: auto;
  aspect-ratio: 3.05/1;
}
/* ==== Header ==== */
.mission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  height: auto;
  width: 100%;
  margin-bottom: 1%;
}
.mission-title {
  font-weight: 400;
  font-size: 13px;
  width: 70%;
  top: 0;
  height: 100%;
}
.mission-type {
  font-weight: 500;
  font-size: 10px;
  width: 10%;
  padding: 2px 5px;
  top: 0;
  border-radius: 50px;
  background-color: #ffffffa7;
  color: #003333;
  height: 100%;
}

.mission-type.success {
  background-color: #00ff7f;
  font-weight: 500;
}

.mission-statusBox {
  display: flex;
  align-items: right;
  flex-direction: column;
  text-align: right;
  width: 50%;
  height: 100%;
  color: #f3f3f3;
  line-height: 1.6;
}
.mission-status {
  font-size: 11px;
  color: #f2ff00;
}
.mission-status2 {
  font-size: 9px;
  color: #ffffff;
  font-weight: 100;
}
.mission-status.success {
  color: #00ff7f;
}
.mission-infoBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 55%;
  height: auto;
  aspect-ratio: 3.07/1;
  padding: 2%;
}

/* ==== เนื้อหาหลัก ==== */
.mission-detail {
  font-size: 11px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 6px;
  border-radius: 8px;
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/btnBoxCard.png');
  background-size: 100% 100%;
  width: 55%;
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 1.6;
  text-align: center;
  height: 100%;
  align-content: center;
}

/* ==== Footer ==== */
.mission-footer {
  display: flex;
  height: 65%;
  justify-content: space-between;
  align-items: center;
}
.mission-progress {
  font-size: 18px;
  font-weight: 600;
  width: 45%;
  height: auto;
  text-align: center;
}

.mission-rewardBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 41%;
  height: auto;
  aspect-ratio: 2.31/1;
  padding: 2%;
}

.mission-reward {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  width: 50%;
  height: 90%;
  color: #f3f3f3;
  line-height: 1.6;
}

.mission-bonus {
  display: flex;
  align-items: center;
  text-align: center;
  height: 50%;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  color: #f3f3f3;
}

.mission-coin {
  width: auto;
  height: 100%;
  margin-right: 10%;
  margin-left: 10%;
}

.mission-reward b {
  color: #fff;
  font-size: 14px;
}

/* 🔹 ปุ่มรับ */
.btn-claim {
  border: none;
  border-radius: 8px;
  height: 90%;
  width: 40%;
  padding: 4px 14px;
  font-size: 16px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.25);
  color: #ccc;
  transition: all 0.2s ease;
}
.btn-claim.active {
  background: linear-gradient(180deg, #00ff73, #00c845);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  color: #000;
  font-weight: 600;
}
.btn-claim.active:hover {
  transform: scale(1.05);
}

/* 🔹 ธีมสีการ์ด */
.mission-card.success {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/cardEventSuccess.png');
  background-size: 100% 100%;

}
/* 🔹 ธีมสีการ์ด */
.mission-infoBox.success {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/infoBoxCard-Success.png');
  background-size: 100% 100%;
}
.mission-rewardBox.success {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/btnBoxCard-Success.png');
  background-size: 100% 100%;
}
.mission-progress.success {
  color: #00ff7f;
}
.mission-detail.success {
  color: #00ff7f;
}


.mission-card.pending {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/cardEvent.png');
  background-size: 100% 100%;
}
.mission-infoBox.pending {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/infoBoxCard.png');
  background-size: 100% 100%;
}
.mission-rewardBox.pending {
  background-image: url('../images/pokdeng-game-room/openChat/eventChat/btnBoxCard.png');
  background-size: 100% 100%;
}
.mission-card.weekly {
  background: linear-gradient(180deg, #004967, #002c38);
}



.chat-window .icon-chat {
  top: 7px;
  left: 37px;
  width: 20px;
  height: 20px;
  position: absolute;
  aspect-ratio: 1;
}

/* โครงสร้างรวม */
.chat-tab-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: transparent;
  gap: 0;
  position: relative;
  top: 10%;
  height: 35%;
  width: 75%;
  padding-left: 2%;
  padding-right: 2%;

}

/* ปุ่มแต่ละอัน */
.chat-tab {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(80, 80, 80, 0.25) 0%,
    rgba(40, 40, 40, 0.5) 100%
  );
  color: #ccc;
  font-family: "Kanit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  border: none;
  padding: 7px 15px 7px 15px;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  backdrop-filter: blur(8px) saturate(120%);
}

/* เมื่อปุ่ม active (เลือกอยู่) */
.chat-tab.active {
  padding: 10px 15px 10px 15px;  
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(200, 200, 200, 0.15) 100%
  );
  color: #fff;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(0, 255, 255, 0.3);
  transform: translateY(0px);
  transform: scale(1.05);
  z-index: 5;
  margin-right: -5px; 
  margin-left: -5px; 
}

/* ปุ่มซ้าย */
.chat-tab:first-child {
  z-index: 2;
}


/* ปุ่มขวา */
.chat-tab:last-child {
  z-index: 1;
}

/* ไอคอนในปุ่ม */
.chat-tab .tab-icon {
  font-size: 18px;
  line-height: 1;
}



.chat-window .footer-chat-bar {
  width: 100%;
  height: 19.98%;
  display: flex;
  position: absolute;
  bottom: 0;
}

.chat-window .footer-bar {
  width: 100%;
  height: 55%;
  display: flex;
  position: absolute;
  bottom: 0;
  background-size: 100% 100%;
  background-image: url("../images/pokdeng-game-room/openChat/footer-DisplayChat.png");
}

.chat-window .btn {
  position: relative;
  margin-top: 10px;
  width: auto;
  height: 70%;
  margin-left: 12px;
  background-blend-mode: darken;
  aspect-ratio: 1;
  transition: transform 0.15s ease;
}

.chat-window .text-write {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 35px;
  border-radius: 52px;
  border: 1px solid;
  border-color: #298585;
  background: linear-gradient(
    90deg,
    rgba(181, 255, 204, 1) 0%,
    rgba(217, 217, 217, 1) 100%
  );
}

.chat-window .chat-input {
  margin-top: 3%;
  width: 60%;
  left: 13%;
  position: relative;
  height: 50%;
  border-radius: 50px;
  font-size: 16px;
  padding-left: 10px;
  color: #002828;
  border: 1px solid;
  border-color: #298585;
  background: linear-gradient(
    90deg,
    rgba(181, 255, 204, 1) 0%,
    rgba(217, 217, 217, 1) 100%
  );
}
.chat-window .input-text {
  margin-top: 16px;
  width: 262px;
  height: 35px;
  position: relative;
  margin-left: 53px;
}

.chat-window .icon {
  top: 4px;
  left: 9px;
  width: 25px;
  height: 25px;
  position: absolute;
  aspect-ratio: 1;
}

.chat-window .send {
  position: relative;
  margin-top: 10px;
  width: auto;
  height: 70%;
  margin-left: 15%;
  background-blend-mode: darken;
  aspect-ratio: 1;
}

@keyframes pressBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); }
  80% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.animate-press {
  animation: pressBounce 0.25s ease;
}


/*********<!-- 
╔════════════════════════════════════════════════════════════╗
║                                                            ║
║     ██████╗  ██████╗  ██████╗ ███╗   ███╗                 ║
║     ██╔══██╗██╔═══██╗██╔═══██╗████╗ ████║                 ║
║     ██████╔╝██║   ██║██║   ██║██╔████╔██║                 ║
║     ██╔══██╗██║   ██║██║   ██║██║╚██╔╝██║                 ║
║     ██║  ██║╚██████╔╝╚██████╔╝██║ ╚═╝ ██║                 ║
║     ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝     ╚═╝                 ║
║                         R O O M                            ║
╚════════════════════════════════════════════════════════════╝
-->**************/

.window-change-room {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(0%);
  z-index: 2000;
}

.window-change-room.active {
  bottom: 0%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.window-change-room .display {
  position: relative;
  display: flex;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  flex-direction: column;
  background-image: url("../images/pokdeng-game-room/openRoom/display-side.png");
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(100%);
  background-size: 100% 100%;
  overflow-y: hidden;
}

.window-change-room.active .display {
  transform: translateX(0);
}

.window-change-room .header-room {
  margin-left: 5%;
  width: 90%;
  height: auto;
  display: flex;
  margin-top: 2%;
  border-bottom: 1px solid #ffffff5d;
}

.window-change-room .head {
  margin-left: 3%;
  width: 80.27%;
  height: 90%;
  margin-top: 2%;
  display: flex;
  position: relative;
}

.window-change-room .symbol {
  top: 5%;
  height: 80%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff1a;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}

.window-change-room .title-and-detail {
  display: flex;
  width: 100%;
  height: auto;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.window-change-room .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 0%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.window-change-room .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: auto;
  margin-top: 0%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.window-change-room .list-room {
  display: flex;
  flex-direction: column;
  width: 95%;
  height: auto;
  gap: 2%;
  border-radius: 0 0 0 15px;
  margin-top: 2%;
  margin-bottom: 5%;
  margin-left: auto;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

/* สไตล์ scrollbar */
.list-room::-webkit-scrollbar {
  width: 3px;
}
.list-room::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.window-change-room .room{
  display: flex;
  position: relative;
  width: 95%;
  border-bottom: 1px solid  #ffffff58;
}

/* ห้องแต่ละห้องใช้ภาพไม่เหมือนกัน */
.window-change-room .room1 {
  background-image: url("../images/pokdeng-game-room/openRoom/room1.png");
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 8%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1.7426;
}

.window-change-room .room2 {
  background-image: url("../images/pokdeng-game-room/openRoom/room2.png");
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 8%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1.7426;
}

.window-change-room .room3 {
  background-image: url("../images/pokdeng-game-room/openRoom/room3.png");
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 8%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1.7426;
}


.window-change-room .room4 {
  background-image: url("../images/pokdeng-game-room/openRoom/room4.png");
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 8%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1.7426;
}
.window-change-room .room5 {
  background-image: url("../images/pokdeng-game-room/openRoom/room5.png");
  display: flex;
  position: relative;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 8%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1.7426;
}

.window-change-room .round-game {
  position: absolute;
  top: 86%;
  left: 53%;
  width: 28%;
  height: 15%;
}

.window-change-room .text-round {
  position: absolute;
  width: 80%;
  height: 100%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 100;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.window-change-room .card-room {
  position: absolute;
  width: 100%;
  height: 86.03%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background-image: url("../images/pokdeng-game-room/openRoom/");
  overflow: hidden;
}

.window-change-room .info-room {
  position: absolute;
  top: 33%;
  left: 35%;
  width: 20%;
  height: 35%;
}

.window-change-room .info-Bet {
  position: absolute;
  width: 100%;
  height: 25%;
  top: 0;
  left: 0;
  margin-bottom: auto;
}

.window-change-room .info-User {
  position: absolute;
  width: 100%;
  height: 25%;
  top: 37.5%;
  left: 0;
  margin-bottom: auto;
}


.window-change-room .info-Price {
  position: absolute;
  width: 100%;
  height: 25%;
  top: 75%;
  left: 0;
  margin-bottom: auto;
}

.window-change-room .icon-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 22%;
  height: auto;
  aspect-ratio: 1;
}

.window-change-room .text-info {
  position: absolute;
  width: auto;
  height: 100%;
  top: 0;
  padding-left: 3%;
  left: 30%;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.room .profile-dealer {
  position: absolute;
  top: 29%;
  left: 4%;
  width: 28%;
  height: auto;
}
.room .pic-dealer {
  position: relative;
  width: 100%;
  height: auto;
}

.room .nameRoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 29px;
  padding-left: 2%;
  font-size: 11px;
  font-weight: 400;
  flex-direction: row;
  line-height: normal;
  white-space: nowrap;
  letter-spacing: 0;
}

.room .roomNumber {
  width: 105px;
  height: 15px;
  margin-left: 8px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.timer {
  position: relative;
  top: 65%;
  left: 35%;
  height: 36.0%;
  width: 20.5%;
  aspect-ratio: 1 / 1;      /* รักษาทรงกลม */
  background-image: url('../images/pokdeng-game-room/openRoom/cooldown.png');
  background-size: 100% 100%;
}

.timer .clock-frame {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.timer svg {
  transform: rotate(-90deg);
}

.timer circle {
  fill: none;
  stroke-width: 7px;
  stroke-linecap: round;
}

.timer .track {
  stroke: rgba(255,255,255,0.1);
}

.timer .progress {
  transition: stroke 0.3s linear;
  transform-origin: center;
}

.timer .time-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
  font-size: clamp(14px, 7vw, 20px); /* ปรับตามจอ */
}




.window-change-room .table-stats {
  border-radius: 4px;
  width: 38%;
  height: 75%;
  position: absolute;
  top: 12.5%;
  left: 58%;
  aspect-ratio: 1;
  border: 0.1px solid #ffffff60;
  aspect-ratio: 1;
}


.window-change-room .table {
  position: relative;
  width: 100%;
  height: auto;
  border: 0.1px solid #ffffff60;
}

/* ===== ช่องแต่ละช่อง (rd-1 ถึง rd-7) ===== */
.table-stats .banker,
.table-stats .player-1,
.table-stats .player-2,
.table-stats .player-3,
.table-stats .player-4,
.table-stats .player-5,
.table-stats .player-6 {
  flex-direction: row;
  position: relative;
  width: 100%;
  left: 0;
  height: auto;
  aspect-ratio: 7;
}

.table-stats .rd-1 {
  display: flex;
  width: 14.28%;
  left: 0;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .rd-2 {
  display: flex;
  position: absolute;
  width: 14.28%;
  height: 100%;
  top: 0;
  left: 14.28%;
  aspect-ratio: 1;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
}

.table-stats .rd-3 {
  display: flex;
  width: 14.28%;
  left: 28.56%;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
}

.table-stats .rd-4 {
  display: flex;
  width: 14.28%;
  left: 42.84%;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .rd-5 {
  display: flex;
  width: 14.28%;
  left: 57.12%;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .rd-6 {
  display: flex;
  width: 14.28%;
  left: 71.4%;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
}

.table-stats .rd-7 {
  display: flex;
  width: 14.28%;
  left: 85.68%;
  border: 0.1px solid #002c2d;
  background-color: #ffffff60;
  position: absolute;
  height: 100%;
  top: 0;
  aspect-ratio: 1;
}




/*********<!-- 
╔════════════════════════════════════════════════════════════╗
║                                                            ║
║     ██████╗  ██╗   ██╗ ██╗      ███████╗                      ║
║     ██╔══██╗ ██║   ██║ ██║      ██╔════╝                      ║
║     ██████╔╝ ██║   ██║ ██║      █████╗                        ║
║     ██╔══██╗ ██║   ██║ ██║      ██╔══╝                        ║
║     ██║  ██║ ╚██████╔╝ ███████╗ ███████╗                      ║
║     ╚═╝  ╚═╝  ╚═════╝  ╚══════╝ ╚══════╝                      ║
║                         R U L E                            ║
╚════════════════════════════════════════════════════════════╝
-->**************/


.rule-window {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1.5;
  display: flex;
  position: fixed;
  bottom: -100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(0%);
  z-index: 2000;
}

.rule-window.active {
  bottom: 0%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rule-window .display {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../images/pokdeng-game-room/openRule/DisplayRule.png");
  background-size: 100% 100%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(0%);
}

.rule-window .header-rule {
  width: 100%;
  height: 15.19%;
  display: flex;
  top: 0;
}

.rule-window .head {
  margin-left: 8%;
  width: 47.27%;
  height: 53.19%;
  margin-top: 4%;
  display: flex;
  position: relative;
}
.rule-window .symbol {
  top: 0;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff1a;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}

.rule-window .title-and-detail {
  display: flex;
  width: auto;
  height: 100%;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.rule-window .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 50%;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 2%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.rule-window .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 40%;
  margin-bottom: 5%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.rule-window .btn-close {
  display: flex;
  position: absolute;
  top: 4.5%;
  width: auto;
  height: 5%;
  right: 7%;
  aspect-ratio: 1 ;
}

.rule-window .box-content {
  display: flex;
  position: absolute;
  top: 14%;
  margin-left: 4%;
  height: 83%;
  width: 92%;
}
.rule-window .content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: auto;
  width: auto;
  aspect-ratio: 0.70/1;
}





/*********<!-- 
╔═════════════════════════════════════════════════════════════════╗
║                                                                 ║
║     ██╗  ██╗ ██╗ ███████╗████████╗ ██████╗ ██████╗  ██╗   ██╗   ║
║     ██║  ██║ ██║ ██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗ ██║   ██║   ║
║     ███████║ ██║ ███████╗   ██║   ██║   ██║██████╔╝  ██████╔╝   ║
║     ██╔══██║ ██║ ╚════██║   ██║   ██║   ██║██╔══██╗    ██╔═╝    ║
║     ██║  ██║ ██║ ███████║   ██║   ╚██████╔╝██║  ██║    ██║      ║
║     ╚═╝  ╚═╝ ╚═╝ ╚══════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝    ╚═╝      ║
║                      H I S T O R Y                              ║
╚═════════════════════════════════════════════════════════════════╝
-->**************/

.history-window {
  width: 100%;
  height: 69.73%;
  display: flex;
  position: fixed;
  bottom: -100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(0%);
  z-index: 2000;
}

.history-window.active {
  bottom: 0%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.history-window .display {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../images/pokdeng-game-room/openHistory/displayHistory.png");
  background-size: 100% 100%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(0%);
}

.history-window .header-history {
  width: 100%;
  height: 10%;
  display: flex;
  top: 0;
}

.history-window .head {
  margin-left: 8%;
  width: 47.27%;
  height: 80%;
  margin-top: 4%;
  display: flex;
  position: relative;
}
.history-window .symbol {
  top: 0;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  background-color: #ffffff1a;
  border-radius: 50px;
  position: relative;
  aspect-ratio: 1;
}

.history-window .title-and-detail {
  display: flex;
  width: auto;
  height: 100%;
  left: 5%;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.history-window .text-head {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 50%;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 2%;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}

.history-window .text-sub {
  display: flex;
  align-self: stretch;
  width: auto;
  height: 40%;
  margin-bottom: 5%;
  font-weight: 300;
  color: #afafaf;
  font-size: 11px;
  overflow: hidden;
  position: relative;
  align-items: start;
  justify-content: start;
  letter-spacing: 0;
  line-height: normal;
}


.history-window .btn-close {
  display: flex;
  position: absolute;
  top: 4.5%;
  width: auto;
  height: 5%;
  right: 7%;
  aspect-ratio: 1 ;
}

.history-window .text-headboard {
  display: flex;
  width: 100%;
  height: 30%;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: normal;
}

.history-window .select-date {
  display: flex;
  position: relative;
  width: 60%;
  margin-left: 10%;
  margin-top: 2%;
  flex-direction: row;
}

.history-window .search-bar {
  display: flex;
  position: relative;
  flex-direction: column;
  top: 5%;
  width: 100%;
  height: 10%;
  right: 0;
}

.history-window .btn-submit {
 all: unset;
 box-sizing: border-box;
 position: absolute;
 display: flex;
 top: 50%; 
 right: 10%;
 width: 15%;
 height: 50%;
 border-radius: 238.76px;
 overflow: hidden;
  background: linear-gradient(
    0deg,
    rgba(0, 152, 28, 1) 0%,
    rgba(0, 152, 28, 1) 100%
  ),
  linear-gradient(
    0deg,
    rgba(51, 51, 51, 0.45) 0%,
    rgba(51, 51, 51, 0.45) 100%
  ),
  linear-gradient(
    0deg,
    rgba(153, 153, 153, 0.3) 0%,
    rgba(153, 153, 153, 0.3) 100%
  );
  box-shadow: inset 1.5px 1.5px 2.1px #f2f2f2, inset 1.5px 1.5px 1.04px #ffffff80, inset 0.5px 0.5px 0.5px -1.1px #ffffff, inset -0.5px -0.5px -0.5px 1px #ffffff, inset -1px -1px 0px -1.21px #262626, inset 0.5px 1px 0px -1.21px #333333, 1px 0.5px 0.5px #00000040, inset 0px 3px 21.6px  #00807145;
}

.history-window .icon-search {
  height: 70%;
  display: flex ;
  position: relative;
  width: auto;
  aspect-ratio: 1;
  margin-top: 4%;
  margin-left: 10%;
  margin-right: 18%;
}

.history-window .input-date1 {
  top: 15%;
  width: 45%;
  display: flex ;
  position: relative;
  height: auto;
  border-radius: 50px;
  font-size: 11px;
  color: #002828;
  border: 1px solid;
  border-color: #298585;
  background: linear-gradient(
    0deg,
    rgb(191, 255, 203) 0%,
    rgb(221, 255, 227) 100%
  );
}

.history-window .input-date2 {
  top: 15%;
  width: 45%;
  left: 0%;
  display: flex ;
  position: relative;
  height: auto;
  border-radius: 50px;
  font-size: 11px;
  color: #002828;
  border: 1px solid;
  border-color: #298585;
  background: linear-gradient(
    0deg,
    rgb(191, 255, 203) 0%,
    rgb(221, 255, 227) 100%
  );
}
.history-window .text1 {
  display: flex;
  width: 20%;
  height: auto;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: 0;
  line-height: normal;
}

.history-window .input-text {
  width: 100%;
  font-size: 10px;
  height: auto;
  position: relative;
  top: 1;
  padding-left: 25%;
  left: 0%;
  background-color: #ffffff75;
  border-radius: 6px 30px 30px 6px;
}

.history-window .icon {
  width: 28%;
  margin-left: -5%;
  height: auto;
  aspect-ratio: 1;
  position: absolute;
  display: flex;
  background-color: #ffffff;
  border-radius: 50px;
  top: -20%;
  z-index: 5;
  left: 0;
  border: 1px solid #00130c24;
  }


/* กล่องหลัก */
.history-window .history-board {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 68%;
  margin-top: 10%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* แถบแท็บ */
.history-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.history-tabs .button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: #ddd;
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.25s ease;
}

.history-tabs .button.active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 500;
  border-bottom: 2px solid #00ffa3;
}

/* พื้นที่ข้อมูล */
.history-content {
  display: flex;
  flex-direction: column;
  height: 100%; /* ✅ กำหนดความสูงรวมของส่วนข้อมูล */
}

.table {
  width: 100%;
  border-collapse: collapse;
  color: #ffffff;
  font-size: 10px;
  font-weight: 100;
  table-layout: fixed; /* บังคับคอลัมน์ให้ขนาดคงที่ */
}

/* ✅ กำหนดความกว้างแต่ละคอลัมน์ */
.table thead td:nth-child(1),
.table tbody td:nth-child(1) {
  width: 25%; /* วันที่ - เวลา */
}
.table thead td:nth-child(2),
.table tbody td:nth-child(2) {
  width: 25%; /* รายการเล่น */
}
.table thead td:nth-child(3),
.table tbody td:nth-child(3) {
  width: 15%; /* เดิมพันรวม */
}
.table thead td:nth-child(4),
.table tbody td:nth-child(4) {
  width: 15%; /* ผลลัพธ์ที่แต้ม */
}
.table thead td:nth-child(5),
.table tbody td:nth-child(5) {
  width: 20%; /* สรุปผล */
}

.history-content table thead {
  font-weight: 400;
  color: #bfbfbf;
  background-color: #00000078;
}

/* ✅ จัดให้แนวตรงกลางพอดี */
.table td {
  text-align: center;
  vertical-align: middle;
}

/* ✅ ส่วน scroll ของข้อมูล */
.table-scroll {
  display: none; 
  margin-top: 2% ;
  height: 80%; /* ความสูงพื้นที่ scroll ภายใน */
  overflow-y: auto; /* เปิด scroll แนวตั้ง */
  overflow-x: hidden;
  scrollbar-width: thin; /* สำหรับ Firefox */
  scrollbar-color: rgba(255,255,255,0.4) transparent;
}

.table-scroll.active {
  display: block; /* แสดงเฉพาะแท็บที่ active */
}

/* ✅ Scrollbar สำหรับ Chrome, Edge */
.table-scroll::-webkit-scrollbar {
  width: 1px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.table td {
  padding: 1% 1%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: middle;
  text-align: center;
  font-size: 10px;
  line-height: 1.6;
}

/* สีผลลัพธ์ */
.result-win {
  color: #00ff90;
  font-weight: 500;
  font-size: 12px;
}

.result-lose {
  color: #ff6060;
  font-weight: 500;
  font-size: 12px;
}

/* กล่องไอคอนผล */
.result-icons {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: auto;
}

.result-icons img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255,255,255,0.1);
  padding: 3px;
}

@media (max-width: 600px) {
  .history-window {
    width: 100%;
  }
  .table td {
    font-size: 10px;
  }
}
@supports (-webkit-touch-callout: none) {
  .footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  }
}